<template>
	<view class="item" v-for="item,index in list" :key="index" @tap="toDetails(item.id)">
		<view class="pic">
			<image :src="item.img" mode=""></image>
		</view>
		<view class="content">
			<view class="name">{{item.nm}}</view>
			<view class="cat">{{item.cat}}</view>
			<view class="dir">导演:{{item.dir}}</view>
			<view class="msg"></view>
			<view class="act">{{item.desc}}</view>
			<view class="showtime">{{item.showTimeInfo}}</view>
			<view class="info2">
				<view class="sc">评分:{{item.sc}}</view>
				<view class="wish">{{item.wish}}人想看</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	const props = defineProps(["list"])
 
	function toDetails(id)
	{
		uni.navigateTo({
			url:"/pages/details/details?movieId="+id
		})
	}
</script>

<style lang="scss" scoped>
	.item {
		margin: 5px;
		border: 1px solid #ccc;
		padding: 5px;
		display: flex;
		justify-content: space-around;
		border-radius: 3px;
		box-shadow: 3px 3px 3px #eee;

		.pic {
			width: 180rpx;
			height: 250rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}

		.content {
			// border: 1px solid green;
			width: 500rpx;
			font-size: 26rpx;
			display: flex;
			justify-content: space-around;
			flex-direction: column;

			.name {
				font-size: 30rpx;
				color: purple;
			}

			.info1 {
				display: flex;


				.dir {
					width: 150rpx;
				}
			}

			.info2 {
				display: flex;

				.sc {
					width: 150rpx;
				}
			}
		}

	}
</style>